<template>
    <div class="comp-pay-dialog" id="compConfirmDialog">
    <modal :show="true" :width="400">
            <validator :rules="rules" :parent="_self">
                <form name="form" action="javascript:;">
                    <div class="modal-header">
                        <a href="javascript:;" class="close" @click="hide()"><span>&times;</span></a>
                        <span class="modal-title">{{$t('smcFinance.up.confirm.title')}}</span>
                        <!-- <span class="modal-title">交易类型</span> -->
                    </div>
                    <div class="modal-body">

                        <div class="col-row text">
                            <div class="col-label">
                                <label>{{ $t('smcFinance.up.confirm.priceLab') }}</label>
                            </div>
                            <div class="col-text">
                                100,000 SMC
                            </div>
                        </div>


                        <div class="col-row text">
                            <div class="col-label">
                                <label>{{ $t('smcFinance.up.confirm.amountLab') }}</label>
                            </div>
                            <div class="col-text">
                                {{$t('smcFinance.up.confirm.amount')}}
                            </div>
                        </div>


                        <div class="col-row">
                            <div class="col-input">
                                <input type="password"
                                       class="fn-block"
                                       autocomplete="off"
                                       disableautocomplete
                                       ref="input"
                                       id="payPwd"
                                       name="paypwd"
                                       :placeholder="$t('common.assetPassRequireTip')"
                                       v-model="form.paypwd">
                                <div class="ui-tip">
                                    <!-- <span class="error" >{{errorInfo}}</span> -->
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="submit"
                                        class="ui-btn binds"
                                        v-if="isRequesting === false"
                                        @click="submit()">{{$t('smcFinance.up.confirm.tobuy')}}</button>
                                <button type="submit"
                                        class="ui-btn"
                                        disabled
                                        v-if="isRequesting === true">{{$t('common.waiting')}}...</button>     
                            </div>
                        </div>
                    </div>
                </form>    
            </validator>
    </modal>
</div>
</template>

<script type="text/babel">
    import Validator from '../../../../../grsc-base/component/Validator/main';
    import lang from '../lang';
    import Modal from '../../../../../grsc-base/component/Modal.vue';

    export default {
        data() {
            return {
                errorInfo: '',

                form: {
                    paypwd: ''
                },
                isRequesting: false,
                rules: {
                    paypwd: {
                        required: true,
                        requiredTip: this.$t('common.assetPassRequireTip')
                    },
                }
            };
        },
        components: {
            Modal,
            Validator
        },
        created(){

        },
        props: {
            onSuccess: {
                type: Function,
                default() {

                }
            }
        },
        methods: {
            hide(){
                this.$emit('hide');
            },
            submit(){
                if (this.rules.$checkAll() === false) {
                    return true;
                }
                
                this.isRequesting = true;
                this.onSuccess(this , this.form.paypwd, ()=>{
                    this.isRequesting = false;
                });
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
    .comp-pay-dialog {
    .modal-body{
        .col-row {
            margin-bottom: 8px;
            .col-input{
                width: 244px;
            }
            .col-label {
                width: 90px;
            }
            .col-text {
                width: 204px;
                color: #666d71;
                text-align: left;

            }
            &:last-child {
                margin-top: 32px;
            }
        }
        .text {
            height: 30px;
        }
    }
}
</style>












